<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <title>CSS气泡提示框 可自定义配置箭头DEMO演示</title>
    <meta name="description" content="CSSArrowPlease allows you to create and export CSS code for a custom box with an arrow extending out from the side.">
    <link rel="stylesheet" type="text/css" href="css/app.css" />
  </head>
  <body>

    <div id='content' class='clr'>
      <div class='preview_and_configuration'>
        <div class='preview'>
          <div class='arrow_box'>
            <div class='logo'>css arrow please!</div>
          </div>
        </div>
        <form class='configuration'>
          <h2>Arrow configuration</h2>
          <div class='clr'>
            <ol class='section positions'>
              <li>
                <label>Position</label>
                <label><input type="radio" name="position" value="top"    class="position" /> Top</label>
                <label><input type="radio" name="position" value="right"  class="position" /> Right</label>
                <label><input type="radio" name="position" value="bottom" class="position" /> Bottom</label>
                <label><input type="radio" name="position" value="left"   class="position" /> Left</label>
              </li>
            </ol>
            <ol class='section'>
              <li>
                <label for='size'>Size</label>
                <input class='size' id='size' /><span class='unit'>px</span>
              </li>
              <li>
                <label for='color'>Color</label>
                <input class='base_color color {hash:true,caps:false}' id='color' />
              </li>
            </ol>
            <ol class='section'>
              <li>
                <label for='border_width'>Border width</label>
                <input class='border_width' id='border_width' /><span class='unit'>px</span>
              </li>
              <li>
                <label for='border_color'>Border color</label>
                <input class='border_color color {hash:true,caps:false}' id='border_color' />
              </li>
            </ol>
          </div>
        </form>
      </div>

      <div class='css_result'>
        <code class='code' readonly='readonly'></code>
        <div class='copy_code'></div>
      </div>

    </div>

    

    <script src="js/vendor/jscolor/jscolor.js"></script>
    <link rel="stylesheet" type="text/css" href="js/vendor/jscolor/jscolor.css">

    <script src='js/cssarrowplease.js'></script>

  </body>
</html>
